import React from "react";
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.querySelector("#root"));
// null undefined true false 不会进行渲染
// 1- JSX
// 1- 如果是一个标签
// root.render(<div/>);
// 2- 如果是多个标签
// root.render((
// 	<div>
// 		<h3>App</h3>
// 	</div>
// ))

// 3- 有且只能是一个根元素
// root.render((
// 	<>
// 		<div>1</div>
// 		<div>2</div>
// 	</>
// ))

// 4- 标签必须要闭合
// root.render(<input/>)

// 5- 注释
// root.render((
// 	<div>
// 		{
// 			// 这是标签
// 		}
// 		{/*这是标签*/}
// 		{
// 			// 注释1
// 			// 注释2
// 			// 注释3
// 		}
// 		{
// 			/*
// 			* 注释1
// 			* 注释2*/
// 		}
// 		<h3
// 			// 属性注释
// 			style={{color:"red"}}>App</h3>
// 	</div>
// ))

// 6- 事件
// root.render(<button onClick={()=>{
// 	console.log(this)
// }}>点我呀</button>)

// 7- 列表渲染
let arr = [1, 2, 3, 4];
root.render((
	<div>
		<h3>App</h3>
		{
			arr.map(function (item, index) {
				return (
					<h1 key={index}>{item}</h1>
				)
			})
		}
		<hr/>
		{
			arr.map((item, index) => {
				return (
					<h1 key={index}>{item}</h1>
				)
			})
		}
		<hr/>
		{
			arr.map((item, index) => (
				<h1 key={index}>{item}</h1>
			))
		}
	</div>
))